home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Forms Misc / char-counter.izs < prev    next >
Text File  |  2005-09-28  |  6KB  |  285 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Character Counter 
  4. <!/TITLE>
  5.  
  6. <!DESCRIPTION>This clever text box counts down the letter remaining as you type them in!<!/DESCRIPTION> 
  7.  
  8. <!CATEGORY>Forms<!/CATEGORY>
  9.  
  10. <!SCRIPT>
  11. <!-- START OF SCRIPT -->
  12.  
  13. <!-- HOW TO INSTALL CHARACTER COUNTER:
  14.  
  15.   1.  Copy code into the HEAD section of document
  16.   2.  Put last coding into the BODY section of document  -->
  17.  
  18. <!-- STEP ONE: Add code into HEAD section of document  -->
  19.  
  20. <HEAD>
  21.  
  22. <script type="text/javascript">
  23.  
  24. <!-- Written by Steve - http://jsmadeeasy.com/ -->
  25.  
  26. <!--
  27. function getObject(obj) {
  28.   var theObj;
  29.   if(document.all) {
  30.     if(typeof obj=="string") {
  31.       return document.all(obj);
  32.     } else {
  33.       return obj.style;
  34.     }
  35.   }
  36.   if(document.getElementById) {
  37.     if(typeof obj=="string") {
  38.       return document.getElementById(obj);
  39.     } else {
  40.       return obj.style;
  41.     }
  42.   }
  43.   return null;
  44. }
  45.  
  46. //Contador de caracteres.
  47. function Contar(entrada,salida,texto,caracteres) {
  48.   var entradaObj=getObject(entrada);
  49.   var salidaObj=getObject(salida);
  50.   var longitud=caracteres - entradaObj.value.length;
  51.   if(longitud <= 0) {
  52.     longitud=0;
  53.     texto='<span class="disable"> '+texto+' </span>';
  54.     entradaObj.value=entradaObj.value.substr(0,caracteres);
  55.   }
  56.   salidaObj.innerHTML = texto.replace("{CHAR}",longitud);
  57. }
  58.  
  59. //-->
  60. </script>
  61.  
  62.  
  63. <style type="text/css">
  64. <!--
  65. BODY {
  66.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  67.   font-size: 11px;
  68.   font-weight: bold;
  69.   color: Black;
  70.   margin-left: 0px;
  71.   margin-right: 0px;
  72.   background-color: White;
  73. }
  74.  
  75. .minitext {
  76.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  77.   font-size: 8pt;
  78.   font-weight: normal;
  79.   color: Black;
  80. }
  81.  
  82. .0 {
  83.   background-color: #4786D2;
  84. }
  85. .1 {
  86.   background-color: #D3E8FD;
  87. }
  88. .2 {
  89.   background-color: #D3E8FD;
  90. }
  91. .3 {
  92.   background-color: #D3E8FD;
  93. }
  94. .4 {
  95.   background-color: #D3E8FD;
  96. }
  97.  
  98. TABLE {
  99.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  100.   font-size: 11px;
  101.   font-weight: bold;
  102.   color: Black;
  103. }
  104.  
  105. INPUT.text {
  106.   background-color: #FFFFFF;
  107.   color: Black;
  108.   border: 2px ridge Black;
  109.   font-size: 10px;
  110.   font-family: Verdana, Arial;
  111.   font-weight: normal;
  112. }
  113.  
  114. .enable {
  115.   background-color: #77FF77;
  116.   font-weight: bold;
  117.   color: Black;
  118. }
  119. .disable {
  120.   background-color: #FF7777;
  121.   font-weight: bold;
  122.   color: Black;
  123. }
  124. -->
  125. </style>
  126.  
  127. </HEAD>
  128.  
  129. <!-- STEP TWO: Add code into BODY section of document  -->
  130.  
  131. <BODY>
  132.  
  133. <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
  134. <form action="#" method="post">
  135. <table align="center" class="0" border="0" cellspacing="1" cellpadding="5">
  136.   <tr>
  137.     <td align="right" class="1"><span class="options">Field Name</span></td>
  138.     <td class="2"><INPUT TYPE="TEXT" class="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="Contar('eBann','sBann','{CHAR} characters left.',100);"><br><span id="sBann" class="minitext">100 characters left.</span></td>
  139.   </tr>
  140. </table>
  141. </form>
  142.  
  143.  
  144. <!-- END OF SCRIPT -->
  145. <!/SCRIPT>
  146.  
  147. <!PREVIEW>
  148. <!-- START OF SCRIPT -->
  149.  
  150. <!-- HOW TO INSTALL CHARACTER COUNTER:
  151.  
  152.   1.  Copy code into the HEAD section of document
  153.   2.  Put last coding into the BODY section of document  -->
  154.  
  155. <!-- STEP ONE: Add code into HEAD section of document  -->
  156.  
  157. <HEAD>
  158.  
  159. <script type="text/javascript">
  160.  
  161. <!-- Written by Steve - http://jsmadeeasy.com/ -->
  162.  
  163. <!--
  164. function getObject(obj) {
  165.   var theObj;
  166.   if(document.all) {
  167.     if(typeof obj=="string") {
  168.       return document.all(obj);
  169.     } else {
  170.       return obj.style;
  171.     }
  172.   }
  173.   if(document.getElementById) {
  174.     if(typeof obj=="string") {
  175.       return document.getElementById(obj);
  176.     } else {
  177.       return obj.style;
  178.     }
  179.   }
  180.   return null;
  181. }
  182.  
  183. //Contador de caracteres.
  184. function Contar(entrada,salida,texto,caracteres) {
  185.   var entradaObj=getObject(entrada);
  186.   var salidaObj=getObject(salida);
  187.   var longitud=caracteres - entradaObj.value.length;
  188.   if(longitud <= 0) {
  189.     longitud=0;
  190.     texto='<span class="disable"> '+texto+' </span>';
  191.     entradaObj.value=entradaObj.value.substr(0,caracteres);
  192.   }
  193.   salidaObj.innerHTML = texto.replace("{CHAR}",longitud);
  194. }
  195.  
  196. //-->
  197. </script>
  198.  
  199.  
  200. <style type="text/css">
  201. <!--
  202. BODY {
  203.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  204.   font-size: 11px;
  205.   font-weight: bold;
  206.   color: Black;
  207.   margin-left: 0px;
  208.   margin-right: 0px;
  209.   background-color: White;
  210. }
  211.  
  212. .minitext {
  213.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  214.   font-size: 8pt;
  215.   font-weight: normal;
  216.   color: Black;
  217. }
  218.  
  219. .0 {
  220.   background-color: #4786D2;
  221. }
  222. .1 {
  223.   background-color: #D3E8FD;
  224. }
  225. .2 {
  226.   background-color: #D3E8FD;
  227. }
  228. .3 {
  229.   background-color: #D3E8FD;
  230. }
  231. .4 {
  232.   background-color: #D3E8FD;
  233. }
  234.  
  235. TABLE {
  236.   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
  237.   font-size: 11px;
  238.   font-weight: bold;
  239.   color: Black;
  240. }
  241.  
  242. INPUT.text {
  243.   background-color: #FFFFFF;
  244.   color: Black;
  245.   border: 2px ridge Black;
  246.   font-size: 10px;
  247.   font-family: Verdana, Arial;
  248.   font-weight: normal;
  249. }
  250.  
  251. .enable {
  252.   background-color: #77FF77;
  253.   font-weight: bold;
  254.   color: Black;
  255. }
  256. .disable {
  257.   background-color: #FF7777;
  258.   font-weight: bold;
  259.   color: Black;
  260. }
  261. -->
  262. </style>
  263.  
  264. </HEAD>
  265.  
  266. <!-- STEP TWO: Add code into BODY section of document  -->
  267.  
  268. <BODY>
  269.  
  270. <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
  271. <form action="#" method="post">
  272. <table align="center" class="0" border="0" cellspacing="1" cellpadding="5">
  273.   <tr>
  274.     <td align="right" class="1"><span class="options">Field Name</span></td>
  275.     <td class="2"><INPUT TYPE="TEXT" class="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="Contar('eBann','sBann','{CHAR} characters left.',100);"><br><span id="sBann" class="minitext">100 characters left.</span></td>
  276.   </tr>
  277. </table>
  278. </form>
  279.  
  280.  
  281. <!-- END OF SCRIPT -->
  282. <!/PREVIEW>
  283.  
  284. <!RELATED>NONE<!/RELATED>
  285.